<template>
	<view class="integralVoucherBox">
		<u--form ref="integralVoucher" labelWidth="70" :model="integralVoucherObj" :rules="rules">
			<u-form-item label="小票单号:" prop="ticketNo" borderBottom required>
				<u--input clearable placeholder="请输入小票单号" v-model="integralVoucherObj.ticketNo" border="none"></u--input>
			</u-form-item>
			<u-form-item label="店铺名称:" prop="storeName" borderBottom required @click="popupShow = true,modeType='bottom'">
				<u--input disabled disabledColor="#ffffff" suffixIcon="arrow-right" placeholder="请选择店铺名称" v-model="integralVoucherObj.storeName" border="none"></u--input>
			</u-form-item>
			<u-form-item label="消费类型:" prop="integralType" borderBottom required  @click="openPicker">
				<!-- <u--input v-model="integralVoucherObj.integralType" :customStyle="{display:'none'}"></u--input> -->
				<u--input disabled disabledColor="#ffffff" suffixIcon="arrow-right" placeholder="请选择消费类型" :value="setConfirmIntegralType(integralVoucherObj.integralType)" border="none"></u--input>
			</u-form-item>
			<u-form-item label="消费时间:" prop="consumptionDate" borderBottom required @click="openTime">
				<u--input disabled disabledColor="#ffffff" suffixIcon="arrow-right" placeholder="请选择消费时间" v-model="integralVoucherObj.consumptionDate" border="none"></u--input>
			</u-form-item>
			<u-form-item label="消费金额:" prop="consumptionAmount" borderBottom required>
				<u--input clearable type="digit" placeholder="请输入消费金额" v-model="integralVoucherObj.consumptionAmount" border="none"></u--input>
			</u-form-item>
			<upload-file :Ifslots="true" ref="integralVoucherFile"></upload-file>
			<view class="integralBut">
				<view class="content" @click="GoToPage">查看积分记录</view>
				<view class="content" @click="popupShow = true,modeType='center'">小票上传示例</view>
			</view>
			<u-button customStyle="margin-top:20px;font-size:18px;border-radius:30px"
			:loading="IfImplementEvent" size="large" color="#E41335"
			text="立即提交" @click="integralVoucherSubmit">
			</u-button>
		</u--form>
		<!-- 积分规则 -->
		<view class="IntegralRuleFont">
			<view class="line"></view>
			<view class="text">积分规则</view>
			<view class="line"></view>
		</view>
		<view class="IntegralRuleBox">
			<view style="font-weight: 700;">使用范围</view>
			<view style="font-weight: 700;margin-top: 5px;line-height: 25px;">南海海逸新经济小镇内商家消费，没有直接积分的消费小票可上传积分拍照</view>
			<!-- 积分比例 -->
			<view style="font-weight: 700;margin:10px 0;">积分比例：</view>
			<view style="margin-bottom:5px">10元积1分：餐饮、零售（便利店、服饰、鞋包、眼镜、美妆）、市集物品</view>
			<view style="margin-bottom:5px">20元积1分：(2)	娱乐（密室、剧本杀等）、休闲（摄影、美容、沐足等）</view>
			<view style="margin-bottom:5px">50元积1分：高价品零售（黄金珠宝、数码电子）</view>
			<view style="margin-bottom:5px">100元积1分：酒吧(含清吧、夜店、Live House)、运动、教育培训</view>
			<view>200元积1分：汽车服务</view>
		</view>
		<picker-time @DateChange="time =>integralVoucherObj.consumptionDate=time" @pickerChange="value=>integralVoucherObj.integralType=value" ref="pickerTimeIntegralVoucher"
		:title="integralVoucherPop.title" :pickerColumns="integralVoucherPop.pickerColumns" :selectorType="integralVoucherPop.selectorType" :formatterType="formatter">
		</picker-time>
		<!-- 弹窗 -->
		<u-popup :show="popupShow" :mode="modeType" bgColor="transparent" zIndex="999999">
			<template v-if="modeType=='bottom'">
				<my-popup-list @popupItemClick="popupItemClick" requestName="avatarName" requestUrl="/yzyBusinessDistrict/list"></my-popup-list>
			</template>
			<template v-else>
				<view class="TicketsSeeBox">
					<view class="titleName">小票上传示例</view>
					<view class="imageBox"><image class="img" :src="AdministrationImage.TicketsSeeImg"></image></view>
					<view class="title">请上传信息完整、亮度均匀、照片清晰的小票</view>
					<view class="knowBut" @click="popupShow=false">我知道了</view>
				</view>
			</template>
		</u-popup>
	</view>
</template>

<script>
	import implementStateButton from "@/mixins/implementStateButton.js"
	import {AdministrationImage,againLogin,skipPage,saveSuccessMethods} from "@/utils/common.js"
	import {saveVoucherPost} from "@/config/api.js"
	import {mapState} from 'vuex'
	export default {
		mixins:[implementStateButton],
		data() {
			return {
				integralVoucherIndex:0,//当前上传的哪张图片
				AdministrationImage:AdministrationImage,
				// 弹窗
				popupShow:false,
				modeType:'center',
				integralVoucherPop:{
					title:'消费时间',
					selectorType:'date',
					pickerColumns:[[1]],
				},
				integralVoucherObj:{
					ticketNo:'',//小票单号
					storeName:'',//店铺名称
					integralType:'0',//消费类型
					consumptionDate:uni.$u.timeFormat(new Date(),"yyyy-mm-dd hh:MM:ss"),//消费时间
					consumptionAmount:'',//消费金额
					voucherPhoto:[],
				},
				rules: {
					'ticketNo': {
						type: 'string',
						required: true,
						message: '请填写小票单号',
						trigger: ['blur', 'change']
					},
					'storeName': {
						type: 'string',
						required: true,
						message: '请选择店铺名称',
						trigger: ['blur', 'change']
					},
					'consumptionAmount': {
						type: 'number',
						required: true,
						message: '请填写消费金额',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.integralVoucher.setRules(this.rules)
		},
		computed:{
			...mapState("m_user",['token','userInfo']),
			setConfirmIntegralType(){//消费类型转换
				return function(value){
					return this.integralVoucherPop.pickerColumns[0][value]
				}
			}
		},
		methods:{
			GoToPage(){//查看积分记录
				skipPage('/subpkg/integralRecordList/integralRecordList')
			},
			openTime(){//打开time弹窗
				this.integralVoucherPop.title='消费时间'
				this.integralVoucherPop.selectorType='date'
				// console.log(this.integralVoucherPop.pickerColumns)
				this.$refs.pickerTimeIntegralVoucher.dateSelectorShow=true
			},
			openPicker(){//打开picker弹窗
				this.integralVoucherPop.title='消费类型'
				this.integralVoucherPop.selectorType='picker'
				this.$refs.pickerTimeIntegralVoucher.pickerSelectorShow=true
			},
			popupItemClick(value){//店铺--弹窗点击店铺名称时触发
				this.integralVoucherObj.storeName=value
				this.popupShow=false
				this.$refs.integralVoucher.validateField('storeName')//清空storeName的校验
			},
			integralVoucherSubmit(){//立即提交按钮
				this.$refs.integralVoucher.validate().then(res => {
					if(this.integralVoucherObj.integralType==0&&this.integralVoucherObj.consumptionAmount<10){//餐饮、零售
						return uni.$u.toast('餐饮、零售类，消费金额不能小于10元')
					}else if(this.integralVoucherObj.integralType==1&&this.integralVoucherObj.consumptionAmount<20){
						return uni.$u.toast('娱乐，消费金额不能小于20元')
					}else if(this.integralVoucherObj.integralType==2&&this.integralVoucherObj.consumptionAmount<50){
						return uni.$u.toast('高价品零售，消费金额不能小于50元')
					}else if(this.integralVoucherObj.integralType==3&&this.integralVoucherObj.consumptionAmount<100){
						returnuni.$u.toast('酒吧，消费金额不能小于100元')
					}else if(this.integralVoucherObj.integralType==4&&this.integralVoucherObj.consumptionAmount<200){
						return uni.$u.toast('汽车服务，消费金额不能小于200元')
					}
					if(this.$refs.integralVoucherFile.fileList.length==0){
						return uni.$u.toast('消费凭证图片不能为空！')
					}
					this.getUploadImage(this.$refs.integralVoucherFile.fileList,this.integralVoucherObj,'voucherPhoto')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			async saveIntegralVoucher(param){//保存
			    param.userId=this.userInfo.userId
				param.phone=this.userInfo.phone
				param.userName=this.userInfo.userName
				const res=await saveVoucherPost(param)
				if(res.code==0){
					this.IfImplementEvent=false
					saveSuccessMethods()
				}
			},
			getUploadImage(randerImageList,param,typeName){//图片上传
				var that=this
				uni.uploadFile({
				    url: uni.$u.http.config.baseURL+'/system/mobile/upload',
					header: {
					    'Authorization': 'Bearer ' + that.token
					},
				    filePath: randerImageList[that.integralVoucherIndex].url,
				    name: 'file',
				    success (res){
						let Data=JSON.parse(res.data)
						if(Data.code=='0'){
							that.integralVoucherIndex++//这个图片执行完上传后，开始上传下一张
							param[typeName].push({name:Data.fileName,url:Data.url})
							if(that.integralVoucherIndex == randerImageList.length){//当图片传完时执行save
								param[typeName]=JSON.stringify(param[typeName])
								that.saveIntegralVoucher(param)
							}else{
								that.getUploadImage(randerImageList,param,typeName)
							}
						}else{
							againLogin(Data)
						}
				    }
				})
			},
			formatter(type, value){
				if (type === 'year') {
			        return `${value}年`
			    }
			    if (type === 'month') {
			        return `${value}月`
			    }
			    if (type === 'day') {
			        return `${value}日`
			    }
				if (type === 'hour') {
			        return `${value}时`
			    }
				if (type === 'minute') {
			        return `${value}分`
			    }
			    return value
			},
		},
		onShow() {
			this.popupShow=false
		},
		onLoad() {
			this.integralVoucherPop.pickerColumns=[['餐饮、零售','娱乐','高价品零售','酒吧','汽车服务']]
		}
	}
</script>

<style>
	page{
		background:#fff;
	}
</style>
<style lang="scss" scoped>
.integralVoucherBox{
	padding:15px 30px;
	box-sizing: border-box;
	// 查看积分记录 小票示例
	.integralBut{
		display:flex;
		justify-content: center;
		align-items: center;
		margin:30px 0;
		.content{
			border-radius: 20px;
			border:1px solid #cdcdcd;
			padding:8px 0;
			width:150px;
			display:flex;
			justify-content: center;
			align-items: center;
			&:nth-of-type(1){
				margin-right:15px
			}
			&:nth-of-type(2){
				margin-left:15px
			}
		}
	}
	.eventWrap{
		
	}
	//小票示例弹窗
	.TicketsSeeBox{
		border-radius: 8px;
		background:#fff;
		padding:15px 20px;
		width:580rpx;
		.titleName{
			font-size:15px;
			font-weight: 600;
			text-align: center;
		}
		.imageBox{
			width:100%;
			height:300px;
			margin:20px 0;
			.img{
				height:100%;
				width:100%;
			}
		}
		.title{
			font-size:13px;
			margin:15px;
			text-align: center;
		}
		.knowBut{
			background-color: #E41335;
			width:500rpx;
			padding:8px 0;
			margin:0 auto;
			display:flex;
			align-items: center;
			justify-content: center;
			border-radius: 20px;
			color:#fff;
		}
	}
	// 积分规则文字
	.IntegralRuleFont{
		margin-top:30px;
		padding:0 10px;
		display:flex;
		justify-content: space-between;
		align-items: center;
		.line{
			height:1px;
			width:230rpx;
			background:#cdcdcd;
				
		}
	}
	.IntegralRuleBox{
		margin-top:10px;
		padding: 0 8px;
	}
}
</style>
